import 'package:easy_rich_text/easy_rich_text.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:provider/provider.dart';
import 'package:xvideos/assets_tool/app_colors.dart';
import 'package:xvideos/assets_tool/images.dart';
import 'package:xvideos/hj_page/mine_business/make_money/mine_withdrawal_record_page.dart';
import 'package:xvideos/hj_page/mine_business/mine_vip/charge_user_header.dart';
import 'package:xvideos/hj_page/mine_business/mine_vip/widgets/coin_item.dart';
import 'package:xvideos/hj_utils/screen.dart';
import 'package:xvideos/hj_utils/widget_utils.dart';
import 'package:xvideos/tools_base/global_store/store.dart';
import 'package:xvideos/tools_base/loading/l_error_widget.dart';
import 'package:xvideos/tools_base/loading/loading_center_widget.dart';

import '../mine_utils.dart';
import 'mine_charge_coin_logic.dart';

//金币充值页面
class MineChargeCoinPage extends StatefulWidget {
  MineChargeCoinPage({super.key});

  @override
  State<MineChargeCoinPage> createState() => _MineChargeCoinPageState();
}

class _MineChargeCoinPageState extends State<MineChargeCoinPage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MineChargeCoinLogic>(
      init: MineChargeCoinLogic(),
      builder: (controller) {
        return Scaffold(
          extendBodyBehindAppBar: true,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            title: Text(
              '金币充值',
              style: textStyle(16, Colors.white, FontWeight.w600),
            ),
            actions: [
              InkWell(
                onTap: () => Get.to(RecordsPage(RecordType.recharge)),
                child: Text(
                  '充值记录',
                  style: TextStyle(color: Color(0xff666666), fontSize: 16.sp),
                ),
              ),
              18.w.sizeBoxW
            ],
          ),
          body: () {
            if (controller.isInitLoading) return const LoadingCenterWidget();
            if (controller.model == null) return CErrorWidget();
            return Stack(
              children: [
                Image.asset(
                  'mine_bg.webp'.mineImgPath,
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
                Column(
                  children: [
                    (kToolbarHeight + screen.paddingTop).sizeBoxH,
                    UserChargeView(isFromCoin: true),
                    18.sizeBoxH,
                    _buildWallet(controller),
                    18.sizeBoxH,
                    Expanded(
                      child: CustomScrollView(
                        slivers: <Widget>[
                          SliverPadding(
                            padding: EdgeInsets.symmetric(horizontal: 16),
                            sliver: SliverGrid.builder(
                              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 3,
                                mainAxisSpacing: 12,
                                crossAxisSpacing: 6,
                                childAspectRatio: 111 / 138,
                              ),
                              itemCount: controller.model?.list?.length,
                              itemBuilder: (BuildContext context, int index) {
                                final model = controller.model!.list![index];
                                final select = controller.currentDiamondM?.id == model.id;
                                return CoinItem(
                                  model,
                                  onTap: () {
                                    controller.onChangItemSelect(index);
                                  },
                                  select: select,
                                );
                              },
                            ),
                          ),
                          SliverToBoxAdapter(child: 18.sizeBoxH),
                          SliverToBoxAdapter(
                            child: EasyRichText(
                              '*如提示【交易失败】【账户风险】等，可重新发起订单，或在15分钟后重试支付。如支付未到账，请反馈客服订单号',
                              defaultStyle: TextStyle(color: Color(0xff666666), fontSize: 12),
                              patternList: [
                                EasyRichTextPattern(
                                  targetString: '反馈客服订单号',
                                  style: TextStyle(color: Color(0xffFFD460), fontWeight: FontWeight.w500),
                                  recognizer: TapGestureRecognizer()..onTapDown = (details) => MineUtils.goCSPage(),
                                )
                              ],
                            ).paddingSymmetric(horizontal: 16),
                          ),
                        ],
                      ),
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        GestureDetector(
                          onTap: () => controller.onGotoPay(),
                          child: () {
                            return Container(
                              height: 44,
                              margin: EdgeInsets.symmetric(horizontal: 40),
                              decoration: BoxDecoration(color: AppColors.actionRed, borderRadius: BorderRadius.circular(3)),
                              alignment: Alignment.center,
                              child: Text(
                                '¥${controller.currentDiamondM?.moneyYuan ?? 0}/立即支付',
                                style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.w500),
                              ),
                            );
                          }(),
                        ),
                        12.sizeBoxH,
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text('支付问题反馈，点击联系 ', style: textStyle(12, Color(0xffBFBFC1), FontWeight.w400)),
                            GestureDetector(
                              onTap: () {
                                MineUtils.goCSPage();
                              },
                              child: Text('在线客服', style: textStyle(12, Color(0xffFFD460), FontWeight.w400)),
                            )
                          ],
                        ),
                        16.sizeBoxH,
                      ],
                    ),
                  ],
                ),
              ],
            );
          }(),
        );
      },
    );
  }

  Widget _buildWallet(MineChargeCoinLogic controller) {
    return Container(
        margin: EdgeInsets.symmetric(horizontal: 16),
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.fromLTRB(16, 18, 16, 18),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(.1),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '我的金币余额',
              style: TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.w500),
            ),
            8.sizeBoxH,
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset('coin_icon.png'.mineImgPath, width: 36),
                4.sizeBoxW,
                Consumer<GlobalStore>(builder: (_, store, __) {
                  return Text(
                    "${(globalStore.getWallet()?.amount ?? 0) + (globalStore.getWallet()?.income ?? 0)}",
                    style: TextStyle(color: Color(0xffFFD460), fontSize: 32, fontWeight: FontWeight.w600),
                  );
                }),
                Spacer(),
                InkWell(
                  onTap: () => Get.to(RecordsPage(RecordType.bill), opaque: false),
                  child: Container(
                    alignment: Alignment.center,
                    height: 30,
                    width: 90,
                    decoration: BoxDecoration(
                      color: Color(0xffFFD460),
                      borderRadius: BorderRadius.circular(999),
                    ),
                    child: Text(
                      '金币明细',
                      style: TextStyle(color: Color(0xff3D3D3D), fontSize: 14),
                    ),
                  ),
                )
              ],
            ),
          ],
        ));
  }
}
